<template>
  <div class="homearea">
    <div id="home_page" style="height: 56px">
      <div id="homeheader" class="header">
        <el-row :gutter="1">
          <el-col :span="19">
            <div class="grid-content bg-purple">
              <div class="logo">
                <a href="#" class="nav-item logo_a"></a>
              </div>
              <ul class="nav ul_row">
                <!-- <li v-if="Object.keys(userinfo).length == 0">-->
                <li>
                  <span data-v-52684230="" class="idxcolor">{{
                    cityName
                  }}</span>
                  <span
                    v-show="routerpath == '/'"
                    data-v-52684230=""
                    class="change-text"
                    @click="dialogTableVisible = true"
                    >[切换]</span
                  >
                </li>
                <li>
                  <a
                    href="http://localhost:8080/"
                    class="nav-item oneLevel-page"
                    >首页</a
                  >
                </li>
                <li>
                  <a target="_blank" href="#" class="xyz nav-item oneLevel-page"
                    >全职</a
                  >
                </li>
                <li>
                  <a target="_blank" href="#" class="xyz nav-item oneLevel-page"
                    >兼职</a
                  >
                </li>
                <li>
                  <a
                    target="_blank"
                    href="#"
                    class="qb nav-item oneLevel-page"
                    @click="handleToNewTab('education')"
                    >实习工教育<i class=""></i
                  ></a>
                </li>
                <li>
                  <a
                    target=""
                    href="javascript:void(0)"
                    class="xyz nav-item oneLevel-page"
                    @click="handleToNewTab('zwbk')"
                    >职位百科 <i class=""></i
                  ></a>
                </li>
              </ul>
            </div>
          </el-col>

          <el-col :span="5">
            <div class="grid-login">
              <!-- 企业入口-->
              <div class="login-status" v-if="getUserinfo == null">
                <!-- <a href="javascript(0)" class="f-r go-company"></a> -->
                <router-link to="/login" class="f-r go-company"
                  >企业入口</router-link
                >
                <!-- <div class="logined"></div>-->
              </div>
              <!-- 登录注册-->
              <div
                class="logbtn"
                v-if="routerpath != '/' && getUserinfo == null"
              >
                <el-avatar size="small" :src="circleUrl"></el-avatar>
                <a
                  @click="dialogTableVisibleLog = true"
                  target=""
                  href="javascript:void(0)"
                  class=""
                >
                  登录<span style="color: #d8d8d8">|</span>注册
                </a>
              </div>
              <!-- 用户信息-->
              <div
                class="login-status"
                v-if="getUserinfo !== null"
                style="display: block"
              >
                <div class="logined" v-model="userinfo">
                  <!-- 用户头像 `url(${userinfo.avatarurl})`-->
                  <div
                    class="mine mine_bgimg"
                    :style="{ backgroundImage: `url(${temptitleimg})` }"
                  >
                    <span v-if="userinfo.phone" class="nickname" style="">{{
                      userinfo.phone
                    }}</span>
                    <div class="mine_expand-wrap">
                      <div class="mine_expand">
                        <!-- <div class="mine_item " @click="handleToTab('personalcenter')">-->
                        <a
                          href="javascript:void(0)"
                          @click="handleToTab('personalcenter')"
                          class="mine_item"
                          >个人中心</a
                        >
                        <!-- </div>-->
                        <a
                          href="javascript:void(0)"
                          class="mine_item"
                          @click="handleToTab('resume')"
                          >我的简历 (0%)</a
                        >
                        <a
                          href="javascript:void(0)"
                          class="mine_item"
                          @click="handleToTab('delivered')"
                          >我的投递</a
                        >
                        <a
                          href="javascript:void(0)"
                          class="mine_item"
                          @click="handleToTab('accountsetting')"
                          >账号设置</a
                        >
                        <a
                          class="mine_item"
                          href="javascript:void(0)"
                          @click="loginOut"
                          >退出登录</a
                        >
                      </div>
                    </div>
                  </div>
                  <!--                   <span v-if="userinfo.phone" class="nickname">{{userinfo.phone }}</span>-->
                  <!--                   <span v-else class="nickname">{{ userinfo.nickname }}</span>-->
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-dialog
        width="50%"
        title="切换城市"
        :visible.sync="dialogTableVisible"
      >
        <get-city @change="cityNameChange"></get-city>
      </el-dialog>
    </div>

    <el-dialog width="40%" title="登录" :visible.sync="dialogTableVisibleLog">
      <log_dialog></log_dialog>
    </el-dialog>
  </div>
</template>

<script>
/* eslint-disable */
// 头部到导航
import VueRouter from "vue-router";
import getCity from "@/views/components/common/get-city";
import defualtUrl from "@/assets/img/user-default.png";
import log_dialog from "@/views/components/common/log_dialog";
import tempimg from "@/assets/img/user-default.png";
export default {
  name: "home-header",
  components: {
    getCity,
    log_dialog,
  },
  props: {
    // routerpath: {
    //   type: String,
    //   default: '/'
    // },
    // userinfo: {
    //   type: [Object,Array],
    //   default: ''
    // }
  },
  data() {
    return {
      isclosex: true,
      cityName: "全国",
      routerpath: "",
      dialogTableVisibleLog: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogFormVisibleLog: false,
      userinfo: {
        nickname: "用户名",
        phone: "请登录",
        avatarurl: defualtUrl,
      },
      // element title
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      temptitleimg: tempimg,
      getUserinfo: null,
    };
  },
  created() {
    // console.log('header: ',this.userinfo)
    this.init();
    this.routerpath = this.$route.path;
  },
  methods: {
    init() {
      this.getUserinfo = this.common.init();
      // console.log('home-header页this.userinfo： ',this.getUserinfo)
      if (this.getUserinfo != null) {
        this.userinfo = this.getUserinfo;
        // 子组件向父组件传值
        // this.$emit('change',this.getUserinfo)
        // console.log('home-head-143: ',this.userinfo)
      }
    },
    // 获取切换城市
    cityNameChange(e) {
      // console.log('获取切换城市: ',e)
      this.cityName = "";
      this.cityName = e.cname;
      this.dialogTableVisible = false;
    },
    // to 个人中心
    handleToTab(routerName) {
      this.$router.push({ name: routerName });
    },
    // 打开新页签
    handleToNewTab(routerName) {
      window.open(this.$router.resolve({ name: routerName }).href, "_blank");
    },
    loginOut() {
      // localStorage.removeItem('token')
      // this.$emit('change',this.userinfo.phone)
      if (this.getUserinfo == null) {
        this.$message({ type: "warning", message: "请先登录！" });
        return;
      } else {
        this.common.loginOut();
        localStorage.removeItem("token");
        this.$router.go(0);
      }
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
#home_page {
  background: #fff;
  /* height: 91px; */
  border-bottom: solid 1px #eaeaea;
}

#homeheader {
  width: 1080px;
  margin: 0 auto;
  height: 56px;
  position: relative;
  /* border-bottom: solid 1px #eaeaea; */
}

#homeheader .logo {
  float: left;
  width: 101px;
  margin-right: 40px;
  line-height: 56px;
  background-size: 100%;
  background: url("../../../assets/imgs/logo-shixiseng.ea8da47.png") no-repeat 0
    14px;
}

#homeheader .ul_row {
  padding: 0;
  margin: 0;
  /* display: inline-block; */
}
#homeheader ul li {
  list-style: none;
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  margin-right: 40px;
  height: 56px;
  line-height: 56px;
  text-align: center;
  transition: all 0.4s;
}

/* 企业入口-登录注册- 用户信息 */
#homeheader .grid-login .login-status {
  float: right;
  height: 50px;
  position: absolute;
  right: 0;
}
#homeheader .grid-login .login-status .go-company {
  margin-top: 13px;
  /* margin-left: 18px; */
  /* width: 104px; */
  height: 28px;
  line-height: 56px;
  border: 1px solid #6aa2e4;
  border-radius: 16px;
  text-align: center;
  color: #6aa2e4;
  font-size: 14px;
  padding: 6px 24px;
}
#homeheader .grid-login .login-status .go-company:hover {
  background-color: #6aa2e4;
  color: #fff;
}
#homeheader .grid-login {
  display: flex;
  justify-content: space-between;
}
#homeheader .grid-login .logbtn {
  line-height: 56px;
  /*width: 90px;*/
  /*border: #333333 1px solid;*/
  box-sizing: border-box;
}
#homeheader .grid-login .logbtn a {
  /*background: red;*/
  color: #4c4c4e;
  cursor: pointer;
  font-size: 12px;
}
#homeheader .grid-login .logbtn .el-avatar--small {
  width: 20px;
  height: 20px;
  transform: translateY(5px);
}

#homeheader .oneLevel-page:hover {
  color: #6aa2e4;
}
#homeheader ul li a {
  color: #4c4c4e;
}
#homeheader .nav-item {
  line-height: 56px;
  height: 56px;
  float: left;
}
#homeheader .el-row {
  margin-bottom: 20px;
}

#homeheader .el-row .last-child {
  margin-bottom: 0;
}

#homeheader .el-col {
  border-radius: 4px;
}

/*#homeheader .bg-purple {*/
/*  background: #d3dce6;*/
/*}*/
#homeheader .grid-content {
  border-radius: 4px;
  min-height: 56px;
}

#homeheader .login-status {
  float: right;
}
.grid-content ul li .change-text {
  font-size: 14px;
  color: #4c4c4e;
  cursor: pointer;
}
#homeheader .logined {
  float: right;
  display: inline-block;
  vertical-align: middle;
  /*margin-right: 20px;*/
  margin-top: 15px;
  color: #4c4c4e;
}
#homeheader .login-status .logined {
  margin-right: 50px;
  /*border: #333333 1px solid;*/
}
#homeheader .logined .mine {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 26px;
  cursor: pointer;
  background: no-repeat center/cover;
  background-image: none;
  border-radius: 50%;
  vertical-align: middle;
}
#homeheader .login-status .logined .mine > span {
  margin-left: 35px;
}
#homeheader .logined .mine_bgimg {
  border-radius: 50%;
  /*background-image:url(https://sxsimg.xiaoyuanzhao.com/edu/user_default.png);*/
}
.logined .mine:hover .mine_expand-wrap {
  display: block;
}
.logined .red_point:before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  background-color: #ff6244;
  right: -6px;
  top: 0;
}
.logined .mine_expand-wrap {
  padding-top: 22px;
  position: absolute;
  background-color: transparent;
  width: 136px;
  left: -17px;
  top: 15px;
  z-index: 9;
  display: none;
}
.logined .mine_expand {
  background-color: #fff;
  font-size: 14px;
  box-sizing: border-box;
  box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.06);
  border-radius: 2px;
}
.logined .mine_expand:before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid #f1f1f1;
  border-bottom-color: #fff;
  border-right-color: #fff;
  background-color: #fff;
  right: 100px;
  top: 17px;
  border-radius: 2px;
  transform: rotateX(0deg) rotateY(45deg) rotateZ(45deg);
}
.logined .mine_item {
  position: relative;
  cursor: pointer;
  color: #4c4c4e;
  padding: 12px 0 12px 24px;
  display: block;
}
.logined .mine_item:hover {
  background-color: #f8f8fa;
}
.logined .mine_item .tipred {
  width: 9px;
  height: 9px;
  background: url(//sxsimg.xiaoyuanzhao.com/static/img/noticeDot.png) no-repeat;
  position: absolute;
  left: 95px;
  top: 14px;
}
logined .login-btn img {
  width: 22px;
}
.logined .login-btn a {
  color: #4c4c4e;
}
.logined .login-btn * {
  vertical-align: middle;
}
.logined .login-btn .login {
  margin-left: 5px;
  cursor: pointer;
  font-size: 14px;
}
.logined .login-btn .vertical-line {
  padding: 0 8px;
  color: #d8d8d8;
}
.active {
  background-color: #fff;
  border: 1px #e8e8ea solid !important;
  border-color: #e8e8ea;
  border-right: none !important;
  background-color: #1c3d79 !important;
}
.login-status .logined .nickname {
  margin-left: 2px;
  display: inline-block;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  font-size: 14px;
  color: #4c4c4c;
}
</style>
